import React, { PureComponent } from 'react';
import {
    Row,
    Col,
    Card,
    Form,
    Button,
    Input,
    DatePicker,
    Table,
    Select,
    Icon,
    Divider,
    Popconfirm,
    Modal,
    message,
    Alert,
    Steps
} from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
const FormItem = Form.Item;
const Option = Select.Option;
const currentYear = new Date().getFullYear();
const years =
    [
        { nodeName: currentYear, key: currentYear },
        { nodeName: currentYear - 1, key: currentYear - 1 },
        { nodeName: currentYear - 2, key: currentYear - 2 },
        { nodeName: currentYear - 3, key: currentYear - 3 },
    ];
const months =
    [
        { nodeName: 1, key: 1 },
        { nodeName: 2, key: 2 },
        { nodeName: 3, key: 3 },
        { nodeName: 4, key: 4 },
        { nodeName: 5, key: 5 },
        { nodeName: 6, key: 6 },
        { nodeName: 7, key: 7 },
        { nodeName: 8, key: 8 },
        { nodeName: 9, key: 9 },
        { nodeName: 10, key: 10 },
        { nodeName: 11, key: 11 },
        { nodeName: 12, key: 12 },
    ];
const onValuesChange = (props, changedValues, allValues) => {
    let  sum = 0;
    
    for (let item of Object.keys(allValues)){
        if(item.includes("stgdgg") )
        sum = sum + (allValues[item]? parseInt(allValues[item]):0);
    }
    props.form.setFields({gdst:{value:sum,errors:null}});
}

@connect()
class PipingRoadAddForm extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        };
        this.dispatch = this.props.dispatch;
    }
    submitAddValues = (values) => {

        const hide = message.loading('正在新增...', 0);
        this.props.dispatch({
            type: 'pipingRoad/fetchSewerAddData',
            payload: {
                rm: values,
            },
            callback: response => {
                hide();
                if (response.status) {
                    message.success('新增成功');
                    this.setState({ visible: false });
                    this.props.fetchList();
                } else {
                    message.error('新增失败');
                    console.log(response.ErrorMessage);
                }
            },
        });
    }
    submitEditValues = (values) => {
        
        const hide = message.loading('正在编辑...', 0);
        this.props.dispatch({
            type: 'pipingRoad/fetchSewerEditData',
            payload: {
                rm: values,
            },
            callback: response => {
                hide();
                if (response.status) {
                    message.success('编辑成功');
                    this.setState({ visible: false });
                    this.props.fetchList();
                } else {
                    message.error('编辑失败');
                    console.log(response.ErrorMessage);
                }
            },
        });

    }
    submmitFormValues = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {

                if (values.id) this.submitEditValues(values);
                else this.submitAddValues(values);
            }
        })
    }
    setFormValues = ({ values = null } = {}) => {

        this.props.form.setFieldsValue(values);

    }

    componentDidMount() {
        // debugger
        this.props.OnRef({ ref: this, type: 'AddForm' });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { companyList } = this.props;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 24 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 24 },
            },
        };
        const width = '200px';
        return (
            <><Modal
                title="新增或编辑"
                width={'70%'}
                style={{ top: 20 }}
                destroyOnClose
                visible={this.state.visible}
                onOk={() => {
                    this.submmitFormValues();
                }}
                onCancel={() => {
                    this.setState({ visible: false });
                }}

            >
                <Card style={{ margin: '5px 0' }}>
                    <Form labelAlign="left" layout={'inline'} {...formItemLayout} >
                        <Row>
                            <Col span={8} >
                                <FormItem label="所在道路" >
                                    {getFieldDecorator('szdl', {
                                        initialValue: null, rules: [
                                            {
                                                required: true,
                                                message: '请填写所在道路！',
                                            },
                                        ],
                                    })(<Input placeholder="所在道路" style={{ width: width }} />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="年份" >
                                    {getFieldDecorator('nf', {
                                        initialValue: currentYear, rules: [
                                            {
                                                required: true,
                                                message: '请选择年份！',
                                            },]
                                    })(
                                        <Select style={{ width: 120 }} style={{ width: width }} >
                                            {years.length > 0
                                                ? years.map(item =>
                                                    <Option key={item.key} value={item.key}>
                                                        {item.nodeName}
                                                    </Option>
                                                )
                                                : null}
                                        </Select>)}
                                </FormItem></Col>


                            <Col span={8}>
                                <FormItem label="月份" >
                                    {getFieldDecorator('yf', {
                                        initialValue: (new Date().getMonth()+1), rules: [
                                            {
                                                required: true,
                                                message: '请选择月份！',
                                            },]
                                    })(<Select style={{ width: 120 }} style={{ width: width }} >
                                        {months.length > 0
                                            ? months.map(item =>
                                                <Option key={item.key} value={item.key}>
                                                    {item.nodeName}月
                                            </Option>
                                            )
                                            : null}
                                    </Select>)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label="管道疏通" >
                                    {getFieldDecorator('gdst', {
                                        initialValue: null,
                                    })(<Input placeholder="管道疏通" style={{ width: width }} addonAfter="m" />)}
                                </FormItem></Col>


                            <Col span={8}>
                                <FormItem label="清理淤泥" >
                                    {getFieldDecorator('qlyn', {
                                        initialValue: null,
                                    })(<Input placeholder="清理淤泥" style={{ width: width }} addonAfter="桶" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格110（m）" >
                                    {getFieldDecorator('stgdgg110', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格110（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label="疏通管道规格225（m）" >
                                    {getFieldDecorator('stgdgg225', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格225（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格300（m）" >
                                    {getFieldDecorator('stgdgg300', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格300（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格400（m）" >
                                    {getFieldDecorator('stgdgg400', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格400（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label="疏通管道规格450（m）" >
                                    {getFieldDecorator('stgdgg450', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格450（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格600（m）" >
                                    {getFieldDecorator('stgdgg600', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格600（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格800（m）" >
                                    {getFieldDecorator('stgdgg800', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格800（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label="疏通管道规格1000（m）" >
                                    {getFieldDecorator('stgdgg1000', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格1000（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格1200（m）" >
                                    {getFieldDecorator('stgdgg1200', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格1200（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格1350（m）" >
                                    {getFieldDecorator('stgdgg1350', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格1350（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label="疏通管道规格1500（m）" >
                                    {getFieldDecorator('stgdgg1500', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格1500（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="疏通管道规格1800（m）" >
                                    {getFieldDecorator('stgdgg1800', {
                                        initialValue: null,
                                    })(<Input placeholder="疏通管道规格1800（m）" style={{ width: width }} addonAfter="m" />)}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label="备注" >
                                    {getFieldDecorator('bz', {
                                        initialValue: null,
                                    })(<Input.TextArea placeholder="备注" style={{ width: width }} rows={4} />)}
                                </FormItem>
                                <FormItem label="id" style={{display:'none'}}>
                                    {getFieldDecorator('id', {
                                        initialValue: null,
                                    })(<Input placeholder="id" style={{ width: width }}  />)}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    {/* <Editor/> */}
                </Card>
            </Modal></>
        )
    }
}

const WrappedPipingRoadAddForm 
= Form.create({ onValuesChange: onValuesChange })(PipingRoadAddForm);

export default WrappedPipingRoadAddForm;